<template>
  <div>
    <el-card shadow="never">
      <el-form>
        <el-form-item label="楼宇名称" label-width="80px">
          <el-input v-model="buildParams.name" placeholder="请输入楼宇名称" style="width:300px;margin-right:10px" />
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="dialogVisible = true">添加楼宇</el-button>
      <!-- 表格 -->
      <el-table
        stripe
        :data="buildData"
        style="width: 100%;margin-top:20px"
      >
        <el-table-column
          type="index"
          label="序号"
          width="180"
          align="center"
        >
          <template #default="scope">
            {{ (buildParams.page-1)*buildParams.pageSize+scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="楼宇名称"
          width="180"
          align="center"
        />
        <el-table-column
          prop="floors"
          label="层数"
          align="center"
        />
        <el-table-column
          prop="area"
          label="在管面积(m²)"
          align="center"
        />
        <el-table-column
          prop="area"
          label="物业费(元/m²)"
          align="center"
        />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <div style="text-align: right">
        <el-pagination
          layout="prev, pager, next,jumper,sizes"
          :total="total"
          :page-size="buildParams.pagesize"
          :page-sizes="[5, 10, 20]"
          @current-change="changePage"
          @size-change="Sizechangge"
        />
      </div>
      <!-- 添加/编辑楼宇 -->
      <el-dialog
        :title="isEdit?'编辑楼宇':'新增楼宇'"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form :model="oneBuild" :rules="rules">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="oneBuild.name" placeholder="请输入楼宇名称" />
          </el-form-item>
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="oneBuild.floors" placeholder="请输入楼宇层数" />

          </el-form-item>
          <el-form-item label="在管面积" prop="area">
            <el-input v-model="oneBuild.area" placeholder="请输入在管面积" />

          </el-form-item>
          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="oneBuild.propertyFeePrice" placeholder="请输入物业费" />

          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getBuildList, delBuliding, addBuild, editBuild } from '@/api/parkarea'
export default {
  data() {
    return {
      isEdit: false,
      dialogVisible: false,
      total: null,
      buildData: [],
      buildParams: {
        name: '',
        page: '1',
        pageSize: '10'
      },
      oneBuild: {
        name: '',
        floors: null,
        area: null,
        propertyFeePrice: null
      },
      rules: {
        name: [{ required: true, message: '请输入楼宇名称', trigger: 'blur' }],
        floors: [{ required: true, message: '请输入楼宇层数', trigger: 'blur' }],
        area: [{ required: true, message: '请输入在管面积', trigger: 'blur' }],
        propertyFeePrice: [{ required: true, message: '请输入物业费', trigger: 'blur' }]
      }
    }
  },
  async created() {
    await this.getBuildList()
  },
  methods: {
  // 获取楼宇列表
    async getBuildList() {
      const res = await getBuildList(this.buildParams)
      console.log(res.data.data)
      this.buildData = res.data.data.rows
      this.total = res.data.data.total
    },
    // 删除楼宇
    async del(id) {
      await delBuliding(id)
      this.$message.success('删除成功')
      this.getBuildList()
    },
    // 分页
    changePage(page) {
      this.buildParams.page = page
      this.getBuildList()
    },
    Sizechangge(size) {
      this.buildParams.pageSize = size
      this.getBuildList()
    },
    // 点击编辑按钮编辑
    async edit(row) {
      this.isEdit = true
      this.oneBuild = { ...row }
      this.oneBuild.id = row.id
      this.dialogVisible = true
    },
    // 新增/编辑楼宇
    async update() {
      if (this.isEdit) {
        // 编辑的逻辑
        const res = await editBuild(this.oneBuild)
        console.log(res)
        this.$message.success('编辑成功')
        this.getBuildList()
      } else {
        // 新增的逻辑
        const res = await addBuild(this.oneBuild)
        console.log(res)
        this.$message.success('添加成功')
        this.getBuildList()
      }
      this.dialogVisible = false
    },
    // 搜索楼宇
    async search() {
      const res = await getBuildList(this.buildParams)
      console.log(res)
      this.buildData = res
      this.getBuildList()
    }
  }
}
</script>

<style scoped lang='scss'></style>
